<template>
  <!-- // 用ref包裹完后，不用name.value，直接读取name，vue会自动加上.value。 -->
  <h1>{{name}}</h1>
  <h1>{{job.type}}</h1>
  <h1>{{job.salary}}</h1>
  <button @click="say">say</button>
</template>

<script>
  import {ref} from 'vue'
  export default {
    name: 'App',
    setup(){
      // const a ={}
      // const定义的对象是可以修改里面的属性的
      // a.b =1
      // 但是不能指定成另一个对象
      // a={b:9}
      // 用ref包裹基本数据成响应式
      let name = ref("zhangsan")
      let age = ref(18)
      // 用ref包裹对象成proxy代理对象
      let job = ref({
        type:"vue",
        salary:"30k",
      })
      function say(){
        // 用ref包裹完后，里面的value值改了，vue会检测到。
        name.value ="wangwu"
        age.value = 99
        job.value.type="前端工程师"
        job.value.salary="60k"
        console.log('name', name,age,job)
      }
      return {
        name,
        say,
        job,
      }
    },
  }
</script>
